<template>
	<view class="container">
		<customHead
			title="领券中心"
			isShowBackArrow
			:titlePaddingLeft="30"
		>
		</customHead>
		<view class="main_content">
			<image class="couponBanner" src="@/static/images/home/coupon.png" mode="aspectFill"></image>
			<view class="couponList">
				<view class="coupon_item">
					<view class="item_left">
						<view class="icon">
							<text>运费券</text>
						</view>
						<text class="text">￥</text>
						<span class="span">12</span>
					</view>
					<view class="item_right">
						<view class="right_left">
							<text class="desc">【运费券】12元运费券</text>
							<text class="date">2024.04.10-2024.04.10</text>
						</view>
						<view class="right_right">
							<button class="button _btn_base">立即领取</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				naviHeight: 0
			};
		},
		onLoad () {
			this.naviHeight = getApp().globalData.headHeight;
		},
		methods: {
			
		}
		
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100vw;
		height: 100vh;
		background-color: #FFF2D9;
		
		.main_content{
			width: 100%;
			
			.couponBanner{
				width: 100%;
				height: 500rpx;
			}
			.couponList{
				width: 100%;
				padding: 20rpx;
				box-sizing: border-box;
				
				.coupon_item{
					width: 100%;
					display: flex;
					height: 200rpx;
					
					.item_left{
						width: 30%;
						height: 100%;
						background-color: #E9F3FE;
						display: flex;
						justify-content: center;
						align-items: center;
						position: relative;
						border-radius: 20rpx;
						
						.icon{
							position: absolute;
							top: 0;
							left: 0;
							border-top-left-radius: 20rpx;
							border-bottom-right-radius: 20rpx;
							background-color: #4D9CFD;
							color: #fff;
							font-size: 28rpx;
							padding: 6rpx 20rpx;
						}
						
						.text{
							color: #4D9CFD;
						}
						.span{
							font-size: 64rpx;
							font-weight: bold;
							color: #4D9CFD;
						}
					}
					.item_right{
						height: 100%;
						flex: 1;
						display: flex;
						background-color: #fff;
						border-radius: 20rpx;
						padding: 0 20rpx;
						
						.right_left{
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-around;
							
							.desc{
								font-size: 34rpx;
								font-weight: bold;
							}
							.date{
								font-size: 24rpx;
								color: #747474;
								font-weight: bold;
							}
						}
						.right_right{
							display: flex;
							align-items: center;
							
							.button{
								width: 160rpx;
								height: 65rpx;
								border-radius: 35rpx;
								font-size: 28rpx;
								color: #fff;
								padding: 0;
							}
							.button1{
								width: 160rpx;
								height: 65rpx;
								border-radius: 35rpx;
								font-size: 28rpx;
								color: #fff;
								padding: 0;
								opacity: 0.5;
							}
						}
					}
				}
			}
		}
	}
</style>
